<template>

  <el-scrollbar>

    <div id="video-main">

      <div id="left-container">

        <div id="video-title">
          <h1 id="video-title-content">{{ video.title }}</h1>
          <p style="display: flex;color: #9499A0">
            <svg style="width:20px;height:20px;position: relative;top: 1px" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 20 20" width="20" height="20"><path d="M10 4.040041666666666C7.897383333333334 4.040041666666666 6.061606666666667 4.147 4.765636666666667 4.252088333333334C3.806826666666667 4.32984 3.061106666666667 5.0637316666666665 2.9755000000000003 6.015921666666667C2.8803183333333333 7.074671666666667 2.791666666666667 8.471183333333332 2.791666666666667 9.998333333333333C2.791666666666667 11.525566666666668 2.8803183333333333 12.922083333333333 2.9755000000000003 13.9808C3.061106666666667 14.932983333333334 3.806826666666667 15.666916666666667 4.765636666666667 15.744683333333336C6.061611666666668 15.849716666666666 7.897383333333334 15.956666666666667 10 15.956666666666667C12.10285 15.956666666666667 13.93871666666667 15.849716666666666 15.234766666666667 15.74461666666667C16.193416666666668 15.66685 16.939000000000004 14.933216666666667 17.024583333333336 13.981216666666668C17.11975 12.922916666666667 17.208333333333332 11.526666666666666 17.208333333333332 9.998333333333333C17.208333333333332 8.470083333333333 17.11975 7.073818333333334 17.024583333333336 6.015513333333334C16.939000000000004 5.063538333333333 16.193416666666668 4.329865000000001 15.234766666666667 4.252118333333334C13.93871666666667 4.147016666666667 12.10285 4.040041666666666 10 4.040041666666666zM4.684808333333334 3.255365C6.001155 3.14862 7.864583333333334 3.0400416666666668 10 3.0400416666666668C12.13565 3.0400416666666668 13.999199999999998 3.148636666666667 15.315566666666667 3.2553900000000002C16.753416666666666 3.3720016666666672 17.890833333333333 4.483195 18.020583333333335 5.925965000000001C18.11766666666667 7.005906666666667 18.208333333333336 8.433 18.208333333333336 9.998333333333333C18.208333333333336 11.56375 18.11766666666667 12.990833333333335 18.020583333333335 14.0708C17.890833333333333 15.513533333333331 16.753416666666666 16.624733333333335 15.315566666666667 16.74138333333333C13.999199999999998 16.848116666666666 12.13565 16.95666666666667 10 16.95666666666667C7.864583333333334 16.95666666666667 6.001155 16.848116666666666 4.684808333333334 16.7414C3.2467266666666665 16.624750000000002 2.1092383333333338 15.513266666666667 1.9795200000000002 14.070383333333334C1.8823900000000002 12.990000000000002 1.7916666666666667 11.562683333333334 1.7916666666666667 9.998333333333333C1.7916666666666667 8.434066666666666 1.8823900000000002 7.00672 1.9795200000000002 5.926381666666667C2.1092383333333338 4.483463333333334 3.2467266666666665 3.371976666666667 4.684808333333334 3.255365z" fill="currentColor"></path><path d="M12.23275 9.1962C12.851516666666667 9.553483333333332 12.851516666666667 10.44665 12.232683333333332 10.803866666666666L9.57975 12.335600000000001C8.960983333333335 12.692816666666667 8.1875 12.246250000000002 8.187503333333334 11.531733333333333L8.187503333333334 8.4684C8.187503333333334 7.753871666666667 8.960983333333335 7.307296666666667 9.57975 7.66456L12.23275 9.1962z" fill="currentColor"></path>
            </svg>
            <span style="padding: 0 12px 0 4px">
              {{ video.view_count }}
            </span>
            <span>
              {{ video.time }}
            </span>
          </p>
        </div>

        <div v-if="video.uuid===undefined"><el-empty :image-size="200" :description="'什么也没有'"/></div>
        <div v-else >
          <video style="width: 772px" controls muted autoplay :src="'/api/video/stream/uuid/'+video.uuid"></video>
        </div>

        <div id="mutual-div">

          <div title="点赞" class="icon-item">
            <svg width="32" height="32" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="video-like-icon video-toolbar-item-icon">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z" fill="currentColor"></path>
            </svg>
            <span class="icon-text">{{ video.love_count }}</span>
          </div>

          <div title="分享" class="icon-item">
            <svg width="32" height="32" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-share-icon video-toolbar-item-icon">
              <path d="M12.6058 10.3326V5.44359C12.6058 4.64632 13.2718 4 14.0934 4C14.4423 4 14.78 4.11895 15.0476 4.33606L25.3847 12.7221C26.112 13.3121 26.2087 14.3626 25.6007 15.0684C25.5352 15.1443 25.463 15.2144 25.3847 15.2779L15.0476 23.6639C14.4173 24.1753 13.4791 24.094 12.9521 23.4823C12.7283 23.2226 12.6058 22.8949 12.6058 22.5564V18.053C7.59502 18.053 5.37116 19.9116 2.57197 23.5251C2.47607 23.6489 2.00031 23.7769 2.00031 23.2122C2.00031 16.2165 3.90102 10.3326 12.6058 10.3326Z" fill="currentColor"></path>
            </svg>
          </div>

        </div>

        <div style="border-bottom: 1px solid rgba(164, 167, 169, 0.46);padding: 16px 0;">
          <p style="color: #6c757d">{{ video.desc }}</p>
        </div>

        <div id="comment-div">
          <div>
            <span style="font-size: 20px;">评论</span>
          </div>

          <div style="padding: 24px 0;display: flex;position: relative;">
            <img style="width: 72px;height: 72px;border-radius: 50%;" :src="'/api/user/head/id/'+userInfoStore.userInfo.id" alt="头像">
            <div id="comment-input" style="width: calc(100% - 180px);margin: 0 auto;">
              <el-input type="textarea" :rows="3" v-model="userComment" placeholder="请输入你的评论"></el-input>
            </div>
            <el-button style="width: 90px;height: 72px;" type="primary">发布</el-button>
          </div>

          <div>

          </div>
        </div>

      </div>

      <div id="right-container">

      </div>

    </div>

    <div style="height: 200px">

    </div>

  </el-scrollbar>

</template>

<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {GET_VIDEO_INFO_API} from "../../api/video";
import {postRequest} from "../../util/requestUtil";
import {formatTimeObj} from "../../util/common";
import {useUserInfoStore} from "../../store/UserInfoStore";

const userInfoStore = useUserInfoStore();

const userComment = ref("")

const route = useRoute();
const video_id = ref(0)

const video = ref({
  title: "视频标题",
  watch: "1234",
  time: "2023-11-12 23:32:21"
})

onMounted(()=>{
  video_id.value = route.params.id;

  if (route.params.id){
    let formData = new FormData();
    formData.append("uuid", route.params.id);
    postRequest(GET_VIDEO_INFO_API, formData, (data)=>{
      video.value = data.video_info;
      console.log(video)
      if (!video.title){
        video.title = "undefined"
      }
      video.value.time = formatTimeObj(video.value.time);
    }, ()=>{}, ()=>{}, false);
  }
})

</script>

<style scoped>

#video-main{
  max-width: 2540px;
  min-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  box-sizing: content-box;
  position: relative;
}

#left-container{
  position: sticky;
  height: fit-content;
  z-index: 1;
  width: 772px;
}

#video-title{
  margin-top: 20px;
  padding-bottom: 36px;
}

#video-title-content{
  font-size: 20px;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: #0b0c0c;
  line-height: 28px;
  margin-bottom: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#right-container{
  width: 350px;
  flex: none;
  margin-left: 30px;
  position: relative;
  pointer-events: none;
}

#mutual-div{
  padding-top: 12px;
  height: 48px;
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(164, 167, 169, 0.46);
}

.icon-item{
  display: flex;
  align-items: center;
  color: #61666D;
  cursor: pointer;
  margin-right: 24px;
}

.icon-text{
  padding-left: 8px;
}

#comment-div{
  margin-top: 20px;
}

</style>

<style>

#comment-input>div>div>input{
  height: 60px;
}

</style>
